<template>
  <view class="box">
    <!-- 搜索页 -->
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <!-- {{searchlogType==1?'帮帮同城':'帮帮车主'}} -->
      请选择您要连锁的门店
    </view>
    <view class="sousuo">
      <image src="https://pic.bangbangtongcheng.com/static/sousuo2.png" />
      <input type="text" v-model="search" placeholder="搜索" />
      <view class="quxiao" @click="searchList">搜索</view>
    </view>
    <scroll-view
      class="list"
      :style="'height: calc(100vh - ' + curTop + 'px );'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
    >
      <template>
        <view v-for="(item, index) in Recommend" :key="index" @click="details(item)">
          <view class="liss">
            <view class="image_box">
              <image mode="aspectFit" :src="item.image" />
              <view class="state" v-if="item.chainStatus == 1">已连锁</view>
              <view class="state success" v-if="item.chainStatus === '0'">邀请中</view>
            </view>

            <view class="li_3" style="max-width: 336rpx">
              <view class="title">{{ item.shopName }}</view>
              <view class="content">
                {{ item.shopAddress }}
              </view>
            </view>

            <view class="distance" @click.stop="openMap(item)">
              <image
                src="https://pic.bangbangtongcheng.com/static/bbcz/Navigation.png"
                mode="scaleToFill"
              />
              <view>{{ item.distance }}km</view>
            </view>
          </view>
        </view>
      </template>
      <view v-if="Recommend.length == 0 && !firstSearch" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        recordList: [],
        BuildingsInfo: [],
        WatchList: [],
        getShop: [],
        search: '',
        Recommend: [],
        pageSize: 10,
        pageNo: 1,
        orderSort: '1',
        scrollTop: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        imgUrl: this.$imgSrc,
        keyword: '',
        ss: false,
        searchlogType: '',
        userInfo: uni.getStorageSync('Pduser'),
        zbc: false,
        houseDetails: '',
        showShareTips: false,
        tabchage: 1,
        curTop: 300,
        loading: false,
        firstSearch: true,
        longitude: '',
        latitude: '',
        list1: [
          { id: 1, name: '房源信息' },
          { id: 2, name: '房产商家' },
          { id: 3, name: '车源信息' },
          { id: 4, name: '汽车服务' },
          { id: 5, name: '汽车商家' },
          { id: 6, name: '人才简历' },
          { id: 7, name: '招聘信息' },
        ],
      }
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    onLoad(options) {
       this.getLocation()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    methods: {
      // 打开共享者说
      openShareTips(val) {
        this.houseDetails = val
        this.zbc = true
        this.showShareTips = true
      },
      openMap(item) {
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(item.latitude), //目的地latitude
                longitude: Number(item.longitude), //目的地longitude
                name: item.shopName,
                address: item.shopAddress,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(item.latitude),
          longitude: Number(item.longitude),
          name: item.shopAddress,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.showLoading({
          title: '加载中',
          mask: false,
        })
        console.log('getLocation1')
        uni.getLocation({
          type: 'gcj02',

          // highAccuracyExpireTime: "3000",
          success(res) {
            console.log('111')
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.getRecommend()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            uni.hideLoading()
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //     _this.getRecommend()
              //   },
              // })
              return false
            }
          },
        })
      },
      // 关闭共享者说
      closeTips() {
        this.zbc = false
        this.showShareTips = false
      },
      tabclick(id) {
        this.tabchage = id
        this.searchList()
      },
      recordC(text) {
        this.search = text
        this.searchList()
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      back() {
        uni.navigateBack(-1)
      },
      details(item) {
        let that = this
        // uni.navigateTo({
        //   url: "/pages_owner/dealer/dealerDetails?id=" + item.id
        // });
        if (item.id == this.userInfo.shopId) {
          uni.showToast({
            title: '不能邀请自己的门店',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (item.chainStatus === '0') {
          uni.showToast({
            title: '该商家暂未处理其他邀请，请重新选择',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (item.chainStatus == 1) {
          uni.showToast({
            title: '该商家已加入连锁，请重新选择',
            icon: 'none',
            mask: true,
          })
          return
        }
        uni.setStorageSync('shopData', item)
        uni.navigateTo({ url: '/pages_my/inviteShop?type=1' })
        // uni.showModal({
        //   title: '请输入留言',
        //   editable: true,
        //   content: '',
        //   success: function (res) {
        //     if (res.confirm) {
        //       uni.showLoading({
        //         title: '加载中'
        //       });
        //       that.$myRequest
        //         .post("/api/mobile/public/addChainStores", {
        //           aShopId: that.userInfo.shopId,
        //           shopId:item.id,
        //           bussType: 1,
        //           remarks: res.content
        //         })
        //         .then(res => {
        //           uni.showToast({
        //             title: "邀请成功",
        //             icon: "none",
        //             mask: true
        //           });
        //           setTimeout(() => {
        //             that.search = ''
        //             that.searchList()
        //           }, 1500);
        //         });
        //     } else if (res.cancel) {
        //       console.log('用户点击取消');
        //     }
        //   }
        // });
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async searchList() {
        let that = this
        if (this.loading) return
        this.loading = true
        setTimeout(function () {
          that.loading = false
        }, 1000)
        uni.showLoading({
          title: '加载中',
          mask: false,
        })
        this.keyword = this.search
        this.pageNo = 1
        this.ss = true
        this.downStatus = true
        this.Recommend = []
        await this.getRecommend()
        // if (this.searchlogType == 1) {
        // 	//查询车源，房源
        // } else if (this.searchlogType == 2) {
        // 	//查询车源和服务
        // } else if (this.searchlogType == 3) {
        // 	//查询车源
        // }else if (this.searchlogType == 4) {
        // 	//查询经销商
        // }else if (this.searchlogType == 5) {
        // 	//查询服务店家
        // }else if(this.searchlogType == 6){
        // 	//查询我的发布
        // }else if(this.searchlogType == 7){
        // 	//查询共享车源
        // }
      },
      down() {
        if (this.downStatus) {
          this.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getRecommend() {
        this.upStatus = false
        this.firstSearch = true

        this.$myRequest
          .get('/mob/user/getShopInfo', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            keyword: this.keyword,
            state: 1,
            shopType: 1,
            longitude: this.longitude,
            latitude: this.latitude,
            shopId: this.userInfo.shopId,
          })
          .then((res) => {
            uni.hideLoading()
            if (!res.page.list.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.page.list)
            this.firstSearch = false
            uni.stopPullDownRefresh()
            let that = this
            this.$nextTick(function () {
              uni
                .createSelectorQuery()
                .in(this)
                .select('.list')
                .boundingClientRect((result) => {
                  if (result) {
                    that.curTop = result.top
                  }
                })
                .exec()
            })
          })
      },
      // 点击时添加历史记录
      getrecord() {
        this.$myRequest
          .post('/api/mobile/vehicleOwner/increaseHistoricalSearch', {
            userId: this.userInfo.id,
            searchContent: this.keyword,
            searchType: this.searchlogType == 6 ? '3' : this.searchlogType,
          })
          .then((res) => {
            // this.recordList = res.list;
          })
      },
      // 获取历史记录
      gainRecord() {
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryHistoricalSearchBysearchUsers', {
            userId: this.userInfo.id,
            searchType: this.searchlogType == 6 ? '3' : this.searchlogType,
            pageNo: 1,
            pageSize: 20,
          })
          .then((res) => {
            this.recordList = res.HistoricalSearchList.pageList
          })
      },
      delrecord() {
        let that = this
        uni.showModal({
          title: '提示',
          content: '是否清除所有搜索记录？',
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              this.$myRequest
                .post('/api/mobile/vehicleOwner/clearHistoricalSearchBysearchUsers', {
                  userId: this.userInfo.id,
                  searchType: this.searchlogType == 6 ? '3' : this.searchlogType,
                })
                .then((res) => {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'none',
                    mask: true,
                  })
                  that.gainRecord()
                })
            }
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }

  .tab {
    width: 750rpx;
    padding: 0 30rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    .List {
      display: flex;
      align-items: center;
      .item {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 40rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        .image {
          width: 50rpx;
          height: 24rpx;
        }
      }
      .xuan {
        font-size: 32rpx;
        font-weight: 600;
        color: #64b6a8;
      }
      .item:last-child {
        margin-right: 0;
      }
    }
  }

  .sousuo {
    position: relative;
    width: 686rpx;
    height: 72rpx;
    margin-top: 30rpx;
    margin-left: 30rpx;
    border: 2rpx solid #64b6a8;
    border-radius: 36rpx;

    image {
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
      margin-top: 12rpx;
    }

    input {
      display: inline-block;
      width: 400rpx;
      height: 50rpx;
      line-height: 52rpx;
      margin-top: 12rpx;
      vertical-align: top;
      font-size: 28rpx;
    }

    .quxiao {
      position: absolute;
      top: 4rpx;
      right: 4rpx;
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #fff;
      text-align: center;
      background: #64b6a8;
      border-radius: 30rpx;
    }
  }

  .lishi {
    position: relative;
    width: 690rpx;
    margin-left: 30rpx;
    margin-top: 20rpx;
    image {
      position: absolute;
      width: 58rpx;
      height: 58rpx;
      right: 0;
    }
  }

  .list1 {
    width: 690rpx;
    margin-left: 30rpx;
    margin-top: 32rpx;

    .li {
      display: inline-block;
      font-size: 26rpx;
      padding: 14rpx 26rpx;
      background-color: #f2f2f2;
      margin-right: 24rpx;
      margin-bottom: 24rpx;
      border-radius: 10rpx;
    }
  }

  .list {
    margin-top: 50rpx;
    margin-left: 30rpx;
    margin-left: 30rpx;
    width: 690rpx;

    .vacancy {
      width: 100%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #e0e0e0;
      .vehicleRecom {
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 2rpx 6rpx;
          border-radius: 4rpx;
        }
      }
      .vacancy_center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_status {
          span {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }
          span:nth-child(1) {
            margin-right: 16rpx;
          }
        }
        .vacancy_price {
          font-size: 30rpx;
          font-weight: 550;
          color: #e00000;
        }
      }
      .vacancy_biaoq {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_label {
          flex: 1;
          height: 48rpx;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
          .shade {
            position: absolute;
            right: 0;
            top: 0;
            width: 100rpx;
            height: 48rpx;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
          }
          .label {
            display: inline-block;
            padding: 10rpx;
            background-color: #f0f0f0;
            margin-right: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            border-radius: 4rpx;
          }
          .label:nth-last-child(1) {
            margin-right: 0rpx;
          }
        }
        .gend {
          text-align: right;
          width: 80rpx;
          height: 100%;
          font-size: 24rpx;
          color: #888888;
        }
      }
      .personalInformation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28rpx;
        .personalInformation_left {
          display: flex;
          flex-direction: column;
          .personalInformation_image {
            width: 42rpx;
            height: 42rpx;
            border-radius: 42rpx;
            margin-right: 12rpx;
          }
          .GR {
            display: flex;
            align-items: center;
            .name {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
          .GS {
            display: flex;
            align-items: center;
            .corporation {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
        .personalInformation_right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .personalInformation_Time {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            margin-bottom: 6rpx;
            text-align: right;
          }
          .personalInformation_distance {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            text-align: right;
          }
        }
      }
    }

    .resume {
      width: 100%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #e0e0e0;

      .title {
        font-size: 28rpx;
        font-weight: 550;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        margin-bottom: 16rpx;
      }

      .occupation {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        span {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-right: 16rpx;
        }

        span:nth-last-child(1) {
          margin-right: 0;
        }
      }

      .hands-on {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        span {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
        }
      }

      .individual {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .individual_left {
          display: flex;
          align-items: center;

          .name {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            margin-right: 10rpx;
          }

          .vip-rank {
            padding: 3rpx 10rpx;
            margin: 0 18rpx 0 0;
            background: #f6f0ff;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            opacity: 1;
            border: 2rpx solid #bd90d9;
            font-size: 24rpx;
            font-weight: 500;
            color: #bd90d9;
          }
        }

        .individual_right {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
        }
      }
    }

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 24rpx;
      display: flex;
      justify-content: space-between;
      width: 690rpx;

      .tg {
        color: #64b6a8;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        position: relative;

        .triangle {
          width: 0px;
          height: 0px;
          box-sizing: content-box;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 15rpx solid #64b6a8;
          margin-left: 20rpx;
          transition: all 0.5s;
        }

        .fan {
          transition: all 0.5s;
          transform: rotate(180deg);
        }

        .kuang {
          position: absolute;
          left: -240rpx;
          top: 120%;
          background: #fff;
          // transform: translateY(-50%);
          width: 330rpx;
          padding: 0 30rpx;
          z-index: 20;
          box-shadow: 0 0 8rpx 4rpx rgba(0, 0, 0, 0.3);

          .item {
            height: 90rpx;
            line-height: 90rpx;
            border-bottom: 2rpx solid #e0e0e0;
          }

          .item:last-child {
            border-bottom: 0;
          }
        }
      }
    }
    .li {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_1 {
        margin-left: 24rpx;
        // height: 200rpx;
        .tit {
          width: 366rpx;
          font-size: 36rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .neirong_1 {
          width: 366rpx;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;
          .price {
            color: red;
            font-size: 30rpx;
            font-weight: 600;
          }
          .neir_css {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }
          .neir_css:nth-child(2n) {
            margin-left: 10rpx;
          }
          .neir_css:nth-child(2n-1) {
            margin-right: 10rpx;
          }
        }
      }

      .li_2 {
        margin-left: 24rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .tit {
          width: 366rpx;
          font-size: 36rpx;
          line-height: 44rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;

          .tagLabel {
            vertical-align: top;
            background: #64b6a8;
            color: #fff;
            font-size: 24rpx;
            // line-height: 24rpx;
            text-align: center;
            width: 106rpx;
            margin-right: 10rpx;
            padding: 4rpx 6rpx;
            border-radius: 4rpx;
          }
        }

        .neirong_1 {
          width: 366rpx;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;

          .price {
            color: red;
            font-size: 30rpx;
            font-weight: 600;
          }

          .neir_css {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }

          .neir_css:nth-child(2n) {
            margin-left: 10rpx;
          }

          .neir_css:nth-child(2n-1) {
            margin-right: 10rpx;
          }
        }
      }
    }
    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;
      // justify-content: space-between;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }
      .image_box {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
        position: relative;
        .state {
          position: absolute;
          border-radius: 20rpx 0 20rpx 0;
          left: 0;
          top: 0;
          padding: 7rpx 10rpx;
          font-size: 20rpx;
          background: #64b6a8;
          color: #fff;
        }
        .success {
          background: #f1a154;
        }
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 366rpx;
          font-size: 36rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
          min-height: 92rpx;
        }

        .jiedao {
          width: 366rpx;
          font-size: 26rpx;
          margin-bottom: 14rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
          min-height: 64rpx;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 28rpx;
          white-space: nowrap;

          align-items: center;

          .ycyc {
            display: inline-block;
            width: 70rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 12.5px;
          }
        }
      }

      .li_2 {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .vehicleRecom {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
          line-height: 44rpx;

          .tagLabel {
            vertical-align: top;
            background: #64b6a8;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            width: 106rpx;
            margin-right: 10rpx;
            padding: 4rpx 6rpx;
            border-radius: 4rpx;
          }
        }

        .price {
          font-size: 28rpx;
          font-weight: 600;
          color: #e00000;
        }
      }

      .li_3 {
        padding-left: 20rpx;
        width: calc(100% - 300rpx - 100rpx);
        .title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333333;
        }

        .content {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-top: 28rpx;
        }

        .distance {
          font-size: 20rpx;
          font-weight: 500;
          color: #333333;
          text-align: right;
        }
        .servicesAvailable {
          font-size: 32rpx;
          font-weight: 500;
          color: #64b6a8;
          margin-bottom: 20rpx;
        }
        .serviceContent {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
      .distance {
        padding-top: 60rpx;
        width: 100rpx;
        image {
          width: 40rpx;
          margin-bottom: 10rpx;
          height: 40rpx;
          border-radius: 0rpx;
          background: transparent;
        }
        text-align: center;
        color: #222;
        font-size: 20rpx;
      }
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }
  .HousCondition {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .status {
      display: flex;
      align-items: center;

      .item {
        width: 96rpx;
        height: 48rpx;
        background: #ffffff;
        border-radius: 4rpx;
        border: 1px solid #64b6a8;
        margin-right: 10rpx;
        font-size: 24rpx;
        color: #64b6a8;
        text-align: center;
        line-height: 48rpx;
      }
    }
  }
  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    .sharer-tips {
      position: absolute;
      // padding: 30rpx0;
      width: 600rpx;
      // height: 310rpx;
      background-color: #fff;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 10rpx;
      .tips-top {
        padding: 45rpx 35rpx 20rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tips-content {
        padding: 0 35rpx;
        .yong-jin {
          margin-bottom: 10rpx;
          align-items: flex-start;
          flex-wrap: wrap;
          view {
            margin-left: 10rpx;
            width: 400rpx;
            word-wrap: break-word;
            word-break: break-all;
            word-break: break-all;
          }
        }
      }
      .tips-btn {
        width: 100%;
        padding: 30rpx 0;
        margin-top: 40rpx;
        text-align: center;
        background-color: #64b6a8;
        color: #fff;
      }
    }
  }
  .sharer-say {
    // position: absolute;
    justify-content: space-between;
    align-items: center;
    bottom: -30rpx;
    right: 0;
    text {
      width: 400rpx;
      // flex: 11;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    view {
      // flex: 1;
      padding: 10rpx;
      color: #64b6a8;
    }
  }
</style>
